<script setup lang="ts">
// import { useGlobalStore } from '@/stores/modules/global'
// import { useI18n } from 'vue-i18n'
// import { type LanguageType } from '@/stores/interface'
import LoginForm from './components/LoginForm.vue'

// const languageZ = 'zh'
// const languageE = 'en'

// const i18n = useI18n()
// const globalStore = useGlobalStore()

// const onChangLanguage = (lang: string) => {
//   i18n.locale.value = lang
//   globalStore.setGlobalState('language', lang as LanguageType)
// }
</script>

<template>
  <div class="login-container flx-center">
    <div class="login-box">
      <SwitchDark class="dark" />
      <div class="login-left">
        <img class="login-left-img" src="@/assets/images/login_left.png" alt="login" />
      </div>
      <div class="login-form">
        <div class="login-logo">
          <img class="login-icon" src="@/assets/vue.svg" alt="" />
          <h2 class="logo-text">Concise-Admin</h2>
        </div>
        <LoginForm />
      </div>
      <!-- <el-button type="primary">{{ $t('header.login') }}</el-button>
      <el-button type="primary" @click="onChangLanguage(languageZ)">切换中文</el-button>
      <el-button type="primary" @click="onChangLanguage(languageE)">切换英文</el-button> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use './index.scss';
</style>
